<template>
  <view class="content">
    <view class="form">
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/date.png" mode="aspectFit"></image>
          <view>日期</view>
        </view>
        
        <view class="value">
          <picker mode="date" :value="affaireDateValue"  @change="datePickerChange">
            <view>{{ affairDateStr }}</view>
          </picker>
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/name.png" mode="aspectFit"></image>
          <view>姓名</view>
        </view>
        <view class="value">
          <input type="text" v-model="portionData.rec_name" placeholder="输入相关人员姓名" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/name.png" mode="aspectFit"></image>
          <view>金额</view>
        </view>
        <view class="value">
          <input type="digit" v-model="portionData.rec_money" placeholder="输入金额,与描述选填" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/name.png" mode="aspectFit"></image>
          <view>物品</view>
        </view>
        <view class="value">
          <input type="text" v-model="portionData.rec_portion" placeholder="输入物品描述,与金额选填" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/note.png" mode="aspectFit"></image>
          <view>备注</view>
        </view>
        <view class="value">
          <input type="text" v-model="portionData.rec_note" placeholder="备注信息" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/change.png" mode="aspectFit"></image>
          <view>分组</view>
        </view>
        <view>
          <radio-group @change="groupChange">
            <label>
              <radio value="male" :checked="portionData.group_name == 'male'" style="transform:scale(0.8)" />男方
            </label>
            <label>
              <radio value="female" :checked="portionData.group_name == 'female'" color="#ff6433" style="transform:scale(0.8)" />女方
            </label>
          </radio-group>
        </view>
      </view>
    </view>
  
    <view class="btn-action">
      <button
        class="save-btn"
        type="primary"
        @click="savePortion()"
      >确认保存</button>
    </view>
    
    <view v-if="portionData._id" class="del-action">
      <view
        class="del-btn"
        @click="deletePortion"
      >删除记录</view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { dateFormat } from '@/utils';
  import { callCloudFunction } from '@/utils/cloudfunc';
  const portionData = reactive({
    _id: '',
    rec_date: new Date(), // 事务日期
    rec_name: '', // 事务名称
    rec_portion: '',
    rec_money: '',
    rec_note: '',
    group_name: 'male',
    affair_id: '', // 所属事务
  })
  
  const affairDateStr =  computed(() => dateFormat(portionData.rec_date, 'ch', false))
  const affaireDateValue = computed(() => dateFormat(new Date(), '-', true))
  
  
  onLoad((options) => {
    portionData._id = options._id
    portionData.affair_id = options.affair_id
    if (portionData._id) {
      // 获取记录详情
      callCloudFunction({
        name: 'affair-portion',
        data: {action: 'readOne', _id: portionData._id}
      }).then(res => {
        const pdata = res.data
        // console.log('查到数据:', res);
        portionData.rec_date = new Date(pdata.rec_date)
        portionData.rec_name = pdata.rec_name
        portionData.rec_portion = pdata.rec_portion
        portionData.rec_money = Number(pdata.rec_money / 100).toFixed(2)
        portionData.rec_note = pdata.rec_note
        portionData.group_name = pdata.group_name
        portionData.affair_id = pdata.affair_id
      })
    }
  })
  
  
  const datePickerChange = (e) => {
    portionData.rec_date = new Date(e.detail.value)
  }
  const groupChange = (e) => {
    // console.log(e.detail.value);
    portionData.group_name = e.detail.value
  }

  
  const savePortion = () => {
    let recData = {
      ...portionData
    }
    if (!recData.rec_name || (!recData.rec_money && !recData.rec_portion)) {
      uni.showModal({
        title: '错误',
        content: '请填写记录'
      })
      return
    }
    let action = recData._id ? 'update' : 'create'
    recData.rec_date = recData.rec_date.getTime()
    recData.rec_money = parseFloat(recData.rec_money * 100)
    console.log('recData:', recData);
    callCloudFunction({
      name: 'affair-portion',
      data: {action, portion_data: recData}
    }).then(res => {
      uni.showModal({
        title: '结果',
        content: res.message,
        showCancel:false,
        success: () => {
          if (res._id) {
            uni.navigateBack()
          }
        }
      })
    })
  }
  
  const confirmDeleteRecord = () => {
    callCloudFunction({
      name: 'affair-portion',
      data: {action: 'delete', _id: portionData._id}
    }).then(res => {
      uni.showModal({
        title: '提示',
        content:res.message,
        showCancel:false,
        success: () => {
          uni.navigateBack()
        }
      })
    })
  }
  const deletePortion = () => {
    uni.showModal({
      title: '警告',
      content: '确定删除记录吗?操作不可恢复!',
      success: (modelRes) => {
        if (modelRes.confirm) {
          confirmDeleteRecord()
        }
      }
    })
  }
</script>

<style lang="scss">
  .content {
    .form {
      padding: 20rpx;
      .amount {
        padding-left: 50rpx;
        display: flex;
        align-items: center;
        color: #3c7a03;
        font-weight: 700;
        .symbol {
          font-size: 32rpx;
          margin-right: 10rpx;
        }
        .input {
          font-size: 50rpx;
          height: 100rpx;
        }
      }
      .form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 70rpx;
        margin-bottom: 20rpx;
        border-bottom: 1px solid #eee;
        .label {
          width: 160rpx;
          display: flex;
          align-items: center;
          flex-direction: row;
          color: #555;
          font-weight: 700;
          font-size: 28rpx;
          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }
        .value {
          width: 100%;
          height: 60rpx;
          margin-left: 20rpx;
          input {
            height: 60rpx;
          }
        }
        .multi-box {
            display: flex;
            .picker {
              flex: 1;
            }
            .right {
              margin-left: auto;
              color: #3c7a03;
              font-size: 28rpx;
            }
          }
      }
    }
  
    .btn-action {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50rpx;
        .save-btn {
          width: 50%;
        }
      }
    .del-action {
      display: flex;
      justify-content: center;
      align-items: center;
      .del-btn {
        margin-top: 50rpx;
        color: #ff6433;
      }
    }
  }
</style>